<!-- 商品列表页 -->
<template>
  <div>
    <div class="product-main">
      <div class="search-bar">
        <!-- 搜索部分 -->
        <el-card class="card search" shadow="hover">
          <div slot="header">
            <span>搜索部分</span>
          </div>
          <el-row :gutter="30" style="margin:30px;">
            <el-col :span="6">
              <el-input v-model="search.gname" placeholder="请输入商品名称"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="search.pcode" placeholder="商品编码查询"></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="search.brandId" placeholder="请输入商品品牌id"></el-input>
            </el-col>
            <el-col :span="6">
              <el-switch
                v-model="search.isshow"
                active-text="上架"
                inactive-text="不上架"
                style="margin-top:10px;"
              ></el-switch>
            </el-col>
          </el-row>
          <el-row :gutter="30" style="margin:30px;">
            <el-col :span="6">
              <el-input v-model="search.kindId" placeholder="请输入分类id"></el-input>
            </el-col>
            <el-col :span="6" :offset="12">
              <el-button type="danger" @click="doReset">重置</el-button>
              <el-button type="primary" @click="doSearch">搜索</el-button>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <!-- 搜索部分结束，接下来是数据展示部分 -->
      <el-card class="card productinfo">
        <!-- 第一个遮罩层 -->
        <el-dialog title="sku列表" :visible.sync="dialog">
          <el-button type="primary" @click="doSaveSku()">添加sku</el-button>

          <el-table :data="skuList">
            <el-table-column width="100" label="价格">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column property="color" label="颜色展示" width="120">
              <template slot-scope="scope">
                <!-- 动态绑定style要注意使用‘’ -->

                <div :style="{'background-color':scope.row.color,'text-align':'center'}">show color</div>
              </template>
            </el-table-column>
            <el-table-column property="color" label="颜色" width="150">
              <template slot-scope="scope">
                <!-- 动态绑定style要注意使用‘’ -->

                <el-input v-model="scope.row.color"></el-input>
              </template>
            </el-table-column>
            <el-table-column property="count" label="库存" width="100"></el-table-column>
            <el-table-column property="sku_code" label="库存编号" width="100"></el-table-column>
            <el-table-column property="addtime" label="添加时间" width="100"></el-table-column>
            <el-table-column property="color_text" label="颜色描述" width="100"></el-table-column>
            <el-table-column width="250" label="操作">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" @click="editSku(scope.row)">编辑</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="color:red;"
                  @click="deleSku(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <!-- 第二个新增功能遮罩层 -->
        <el-dialog title="sku新增" :visible.sync="dialogAdd">
          <el-form :model="tempskuList" ref="tempskuList" label-width="80px">
            <el-form-item label="价格">
              <el-input v-model="tempskuList.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="库存编码">
              <el-input v-model="tempskuList.sku_code" placeholder="库存编码"></el-input>
            </el-form-item>
            <el-form-item label="颜色描述">
              <el-input v-model="tempskuList.color_text" placeholder="颜色描述"></el-input>
            </el-form-item>
            <el-form-item label="颜色值">
              <el-input v-model="tempskuList.color" placeholder="颜色值"></el-input>
            </el-form-item>
            <el-form-item label="库存数量">
              <el-input v-model="tempskuList.count" placeholder="库存数量"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveTemp">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <div slot="header">
          <span>数据展示</span>
          <el-button type="primary" @click="doAdd">新增</el-button>
        </div>
        <el-table :data="productList" v-loading="loading" border style="width: 100%">
          <el-table-column label="#" type="index" width="30" fixed />
          <el-table-column label="封面图片" fixed :width="130">
            <template slot-scope="scope">
              <img class="cover_img" :src="scope.row.cover_img" />
            </template>
          </el-table-column>
          <el-table-column label="商品名" :width="250">
            <template slot-scope="scope">
              <div
                style="display: flex; flex-direction:column ;justify-content:center;align-items:center;"
              >
                <div>{{scope.row.gname}}</div>
                <div>品牌：{{scope.row.brandName}}</div>
                <div>描述：{{scope.row.descr}}</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="ctitles" label="类别" width="120" />
          <el-table-column label="查看sku" :width="120">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="checkSku(scope.row.id)">查看sku</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="price_now" label="价格（分）" width="120" />
          <el-table-column prop="weight" label="重量（克）" width="120" />
          <!-- 查看sku弹窗 -->

          <el-table-column label="更新状态" :width="300">
            <template slot-scope="scope">
              <p>
                上架:
                <el-switch
                  v-model="scope.row.isshow"
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchCode('isshow',scope.row.isshow,scope.row.id)"
                />
              </p>
              <p>
                最热:
                <el-switch
                  v-model="scope.row.ishot"
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchCode('ishot',scope.row.ishot,scope.row.id)"
                />
              </p>
              <p>
                最新:
                <el-switch
                  v-model="scope.row.isnew"
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchCode('isnew',scope.row.isnew,scope.row.id)"
                />
              </p>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <!-- 自定义列,用于编辑 -->
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="goEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                type="text"
                size="small"
                @click=" doDele(scope.row.id)"
                icon="el-icon-delete"
                style="color:red;"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page.start"
          :page-sizes="page.sizes"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalCount"
        ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import productApi from "@/api/product/index";
import _ from "lodash";
import product from "@/api/product/index";
export default {
  name: "ProductList",
  components: {},
  data() {
    return {
      dialog: false,
      dialogAdd: false,
      tempskuList: {},
      editDialog: false,
      loading: false,
      skuList: [],

      search: {
        isshow: 0,
      },
      page: {
        start: 1,
        limit: 5,
        sizes: [5, 10, 15, 20],
        totalCount: 0,
      },
      productList: [],
    };
  },
  computed: {},
  created() {
    this.getProductList();
  },
  mounted() {},
  methods: {
    // 添加sku
    doSaveSku() {
      this.dialog = false;
      this.dialogAdd = true;
    },
    saveTemp() {
      productApi.upDateSku(this.tempskuList).then((res) => {
         this.$message({
          message: '腻害了',
          type: 'success'
        });
        this.dialogAdd = false;
      });
    },
    // 删除sku
    deleSku(e) {
      console.log(123456);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          productApi.deleSku({ id: e });
          this.skuList.filter((ele) => (ele.id = e));
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    checkSku(e) {
      productApi.getskuList({ productId: e }).then((res) => {
        this.skuList = res.data;
        console.log(res);
        this.dialog = true;
        this.tempskuList.product_id = e;
      });
    },
    editSku(e) {
      this.$confirm("将会修改本sku, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          productApi.upDateSku(e).then((res) => [console.log("111")]);
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    goEdit(id) {
      this.$router.push({ name: "productAdd", params: { id } });
    },
    doDele(id) {
      productApi.deLete({ id }).then((res) => {
        if (res.code == "success") {
          this.$message.success("删除成功!");
          this.getProductList();
        } else {
          this.$message.error("删除失败!");
        }
      });
    },
    doReset() {},
    doAdd() {},
    doSearch() {
      // 搜索search里的数据发送过去，重新请求列表数据
      this.page.start = 1;
      this.getProductList();
    },

    async getProductList() {
      this.loading = true;
      //接口参数传递过去
      var params = {
        ...this.search,
        start: this.page.start,
        limit: this.page.limit,
      };
      // lodash清理无效搜索数据
      params = _.pickBy(params, (item) => item);
      var res = await productApi.productList(params);
      // 结果  对象  分页数据和list
      this.productList = res.data.list;
      // 重置分页数量
      this.page.totalCount = res.data.totalRow;
      // 关闭loading
      this.loading = false;
    },
    // 页面switch改变调用函数
    // switchCode(id,ishot,isshow,isnew) {
    //   console.log(id);
    //   productApi.switchCode({id,ishot,isshow,isnew});
    //   this.getProductList();
    //   console.log("hahaha");
    // },

    switchCode(code, v, id) {
      var obj = {
        id,
      };
      obj[code] = v;
      productApi.switchCode(obj).then((res) => {
        if (res.code == "success") {
          this.$message.success("更新成功!");
        } else {
          this.$message.error("更新失败!");
        }
      });
    },
    // 去新增页面
    goAdd() {
      // 跳转
      this.$router.push({ name: "productAdd" });
    },
    sizeChange(v) {
      this.page.limit = v;
      this.getProductList();
    },
    currentChange(v) {
      this.page.start = v;
      this.getProductList();
    },
  },
};
</script>
<style lang='scss' scoped >
.card {
  margin: 30px;
}
.cover_img {
  width: 100px;
  height: 100px;
}
</style>
